@import '@/styles/variables.scss';
.registration-container{
  font-size: $font-size-main;
  color: $font-color-info;
  //height: 100%;
  padding:$page-y $page-x;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: flex-start;
  .left{
    width: 330px;
    min-width: 320px;
    height: 100%;
    background-color: white;
    margin-right: $page-x;
    .title{
      padding-top:$block-y;
      height:30px;
      .title-title{
      color:#3E909E;
      border-left:3px solid #3E909E;
      margin-left: $block-x;
      span{
          margin-left: $block-x;
          font-weight: bold
        }
      }
    }
    .content{
      .content-single{
        height: calc(100vh - 141px);
        overflow-y: auto;
        @import "@/styles/scrollbalStyle.scss";
        .list-content{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: column;
          .list-item{
            width: 100%;
            margin: 0px $block-x;
            padding: 15px $block-x;
            box-sizing: border-box;
            border-bottom: 1px solid $border-color;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &:hover{
              cursor: pointer;
            }
            .sex-name{
              width: 40%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              >p{
                font-size: $font-color-main;
                color: $font-size-main;
                text-align: left;
                margin-left: $block-space-x;
              }
            }
            .list-num{
              width: 15%;
              p{
                font-size: $font-color-main;
                color: $font-size-main;
                text-align: center;
              }
            }
          }
          .item-active{
            background: $main-color;
            .content{
              color: $font-color-white;
              span{
                color: $font-color-white!important;
              }
            }
          }
        }
      }
    }
  }
  .right{
    width: calc(100% - 330px);
    min-width: 1120px;
    //height: 100%;
    background-color: white;
    box-sizing: border-box;
    //margin-right:$block-x;
    .content-all{
      height: calc(100vh - 141px);
      overflow-y: auto;
      //box-sizing: border-box;
      //@import "@/styles/scrollbalStyle.scss";
      .content{
        display: flex;
        .select{
          margin-top: $collection-x;
          margin-left:$block-x;
        }
        .search{
          width: 200px;
          margin-top:18px;
          margin-left:20px;
          border-radius: $border-radius-4;
        }
      }
      .table{
        margin-top: $collection-x;
        margin-left:$block-x;
        margin-right:$block-x;
        .status{
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #3F909E;
          margin-right: 8px;
          line-height: 8px;
        }
        .status-d{
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: red;
          margin-right: 8px;
          line-height: 8px;
        }
        .el-table{
          max-height:calc(100vh - 263px);
          ::v-deep .el-table__body-wrapper{
            max-height:calc(100vh - 311px);
            overflow-y: auto;
            @import "@/styles/scrollbalStyle.scss";
          }
        }
        .block{
          margin-top: $block-y;
        }
      }
    }
  }
  .demo-ruleForm{
    min-width: 600px;
    width: 100%;
    .selectSex{
      display: flex;
      .sex{
        width: 50%;
        .el-radio{
          width: 100%;
          height: 30px;
        }
      }
    }
    .age{
      display: flex;
      flex-direction:row;
      flex:1;
      margin-top:4px;
      .ageS{
        margin-left:-1px
      }
    }
    .insurance{
      margin-left: 30px;
      height: 60px;
      background: #F5F5F5;
      .insuranceI{
        padding-top:$block-y;
        .input{
          width: 200px;
        }
      }
    }
    .info{
      width: 100%;
      height: 40px;
      display: flex;
      color: #FC833C;
      background: rgba(252, 131, 60, 0.05);
      border: 1px solid rgba(252, 131, 60, 0.3);
      span{
        //margin-left: 20px;
      }
      img{
        width: 16px;
        height: 16px;
        padding-top:12px;
        margin-right: $block-img-text-x;
        margin-left: 10px;
      }
    }
    .info-s{
      width: 100%;
      height: 40px;
      display: flex;
      color: #3F909E;
      background: rgba(82, 171, 187, 0.08);
      border: 1px solid rgba(82, 171, 187, 0.3);
      span{
        //margin-left: 20px;
      }
      img{
        width: 16px;
        height: 16px;
        padding-top:12px;
        margin-left: 10px;
        margin-right: $block-img-text-x;
      }
    }
  }
  .footer{
    display: flex;
    //justify-content: space-between;
    margin-left:40%;
    .footer-q{
      min-width: 200px;
      margin-top:4px;
      color:#FC833C;
      span{
        font-size: $font-size-title;
      }
    }
  }
}